<template>
    <el-form
      ref="searchFormRef"
      :model="searchForm"
      :rules="searchRules"
      label-width="80px"
      class="demo-ruleForm"
      status-icon
    >
    <el-row>
      <el-col :span="10">
        <el-form-item label="标题搜索" prop="article_title">
          <el-input v-model="searchForm.title" @change="updateSearchParams" placeholder="请输入标题进行查找"/>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <div style="display:flex;justify-content: flex-end;">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
  
    </el-form>
  </template>
  
  <script setup lang="ts">
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import { Search } from '@element-plus/icons-vue'
    import {getOfficeAccountList} from '@/api/channelconfig/officeAccount'
  
    const searchFormRef = ref<FormInstance>()
    
    interface SearchType {
      title: string,
      official_account_id: string
    }
    const searchForm = reactive<SearchType>({
      title: '',
    })
  
    const searchRules = reactive<FormRules>({
      title: [
        { required: false, message: '请输入标题搜索', trigger: 'blur' }
      ]
    })
  
    let official_accounts = reactive<any>([])
  
    interface Props {
      title: string
      id: string
    }
    const props = defineProps<Props>()
    const emit = defineEmits(['update:title', 'update:id', 'change'])
    const search = ()=>{
      updateSearchParams()
      emit('change', searchForm)
    }
  
    const reset = ()=>{
      searchForm.title = ''
      updateSearchParams()
      emit('change', searchForm)
    }
  
    const clickSelect = async ()=>{
      let params = {
                page: 1,
                page_size: 100,
                verify_type_info: 0
              }
      const res = await getOfficeAccountList(params)
      official_accounts.splice(0)
      official_accounts.push(...res.data)
    }
  
    const updateSearchParams = ()=>{
      emit('update:title', searchForm.title)
    }
  
  </script>
  
  <style lang="scss" scoped>
    .el-form-item{
      margin-bottom: 12px;
    }
  
  
  </style>
  